<template>
  <div class='modify-info-container'>

    <el-form :model='form'
             label-width="70px">

      <el-row>
        <el-col :span="24">
          <el-col :span="12"
                  id="headTitle">
            <span>查看详情</span>
          </el-col>
          <el-col :span="12"
                  id="headRightTitle">
            <el-button type="primary"
                       @click="onModify">
              修改
            </el-button>
          </el-col>
        </el-col>
        <el-col :span="24"
                id="midRemark">
          <el-col :span="8">
            <el-form-item label="问题备注">
              <el-input type="textarea"
                        :rows="1"
                        placeholder="请输入内容"
                        v-model="form.textarea">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            &nbsp;
          </el-col>
        </el-col>
        <el-col :span="24"
                v-show="show">
          <el-col :span="8"
                  id="footerBox">
            <el-button size="small"
                       type="primary"
                       @click="onSubmit">提交</el-button>
            <el-button size="small"
                       @click="onBlack">返回</el-button>
          </el-col>
          <el-col :span="16">
            &nbsp;
          </el-col>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: false,
      requestParam: {
        page: 1,
        page_size: 10
      },

      form: {
        textarea: '',

      }

    }
  },
  methods: {
    //返回事件
    onBlack () {
      this.$router.push('/reportList');
      this.show = false;
    },
    //提交事件
    onSubmit () {
      this.$message('提交事件!')
    },
    //修改事件
    onModify () {
      this.show = true;
    },
    handlePageChange (page) {

    }
  },
  created () {

  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
#footerBox {
  text-align: center;
  margin-top: 20px;
}
#midRemark {
  border-bottom: 1px solid rgb(230, 230, 230);
}
#headRightTitle {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
#headTitle {
  font-size: 18px;
  color: #1890ff;
}
.modify-info-container {
  height: 100vh;
}
</style>
